<template>
    <div class="main-container">
        <TableBody>
            <template #header>
                <TableHeader :show-filter="false" title="查询条件" @search="onSearch" @reset-search="onResetSearch">
                    <template #table-config>
                        <TableConfig @update-border="onUpdateBorder" @refresh="doRefresh" />
                        <SortableTable class="ml-4" :columns="tableColumns" @update="onUpdateTable" />
                    </template>

                    <template #top-right>
                        <n-button type="info" size="small" @click="device_import"> 资产录入</n-button>

                        <n-button type="warning" size="small" @click="btnClick"> 数据导入</n-button>
                        <n-button type="primary" size="small" @click="export_excel"> 数据导出</n-button>
                        <n-button type="primary" size="small" @click="connect_collect"> 关联采集</n-button>
                        <!-- <n-button type="warning" size="small" @click="device_data_show = true">
              运营展示
            </n-button> -->
                    </template>
                </TableHeader>
            </template>
            <template #default>
                <DataForm ref="searchForm" :form-config="{ labelWidth: 60 }" :options="conditionItems" preset="grid-item" />
                <n-space style="float: right; padding-bottom: 20px">
                    <n-button style="float: right" size="small" type="info" @click="onSearch()">查询
                    </n-button>
                    <n-button style="float: right" size="small" type="success" @click="onResetSearch()">重置
                    </n-button>
                </n-space>

                <n-data-table :loading="tableLoading" :data="dataList" :columns="tableColumns" :single-line="!bordered"
                    :row-key="rowKey" @update:checked-row-keys="handleCheck" @update:expanded-row-keys="handleExpand"
                    :scroll-x="1800" />
            </template>
            <template #footer>
                <TableFooter :pagination="pagination" />
            </template>
        </TableBody>
        <ModalDialog ref="modalDialog" title="资产数据维护" :segmented="segmented" display-directive="show"
            @confirm="EditConfirm">
            <template #content>
                <DataForm ref="EditDataFormRef" :form-config="{ labelWidth: 60 }" preset="grid-item"
                    :options="EditFormOptions" />
            </template>

            <!--      <template #footer>-->
            <!--        <div class="flex justify-end">-->
            <!--          <n-space>-->
            <!--            <n-button type="default" size="small" @click="onCancel">取消</n-button>-->
            <!--            <n-button type="primary" size="small" @click="onConfirm">提交修改</n-button>-->
            <!--          </n-space>-->
            <!--        </div>-->
            <!--      </template>-->
        </ModalDialog>

        <ModalDialog ref="device_import_modalDialog" title="资产数据录入" @confirm="importDataFormConfirm"
            :style="{ height: '500px' }">
            <template #content>
                <DataForm ref="importDataFormRef" :form-config="{
                    labelWidth: 60,
                }" preset="grid-item" :options="importFormOptions" />
            </template>
        </ModalDialog>

        <ModalDialog ref="ChangeLogmodalDialog" title="变更轨迹" :style="{ height: '768px', width: '1366px' }">
            <template #content>
                <n-data-table :data="
                    change_log_list.slice(
                        (change_log_page - 1) * change_log_pageSize,
                        change_log_page * change_log_pageSize
                    )
                " size="small" :columns="change_log_tableColumns" :row-key="rowKey" :loading="tableLoading" />
                <div class="flex justify-center">
                    <n-pagination v-model:page="change_log_page" :page-count="change_log_pageCount" show-size-picker
                        :page-sizes="change_log_pageSizes" />
                </div>
            </template>
        </ModalDialog>

        <ModalDialog ref="show_password_modalDialog" title="查看管理账户信息?" :style="{ height: '500px', width: '500px' }"
            @confirm="second_onConfirm">
            <template #content>
                <n-space>
                    <h3>请输入二级密码</h3>
                    <n-input type="password" show-password-on="mousedown" placeholder="回车查看密码"
                        v-model:value="second_password" @keyup.enter.native="second_onConfirm" />
                </n-space>
            </template>
        </ModalDialog>
        <ModalDialog ref="bind_ip_modalDialog" title="关联IP" :style="{ height: '400px', width: '300px' }"
            @confirm="BindIpConfirm">
            <template #content>
                <n-form label-placement="left" :size="size" label-width="auto" require-mark-placement="right-hanging"
                    :style="{
                        maxWidth: '640px',
                    }" :model="bind_ip_form">
                    <n-form-item label="IP标识名" path="name">
                        <n-input v-model:value="bind_ip_form.name" placeholder="IP标识名" />
                    </n-form-item>
                    <n-form-item label="绑定IP" path="ip">
                        <n-input v-model:value="bind_ip_form.ip" placeholder="绑定IP" />
                    </n-form-item>
                </n-form>
            </template>
        </ModalDialog>
        <ModalDialog ref="connect_account_modalDialog" title="关联设备管理账户" :style="{ height: '500px', width: '500px' }"
            @confirm="ConnectAccountConfirm">
            <template #content>
                <DataForm ref="connect_account_DataFormRef" :form-config="{
                    labelWidth: 60,
                }" :options="connect_account_FormOptions" />
            </template>
        </ModalDialog>
        <ModalDialog ref="account_modalDialog" title="账户信息" :style="{ height: '500px', width: '800px' }">
            <template #content>
                <n-data-table :data="
                    account_list.slice(
                        (account_page - 1) * account_pageSize,
                        account_page * account_pageSize
                    )
                " :columns="account_tableColumns" :row-key="rowKey" :loading="tableLoading" />
            </template>
        </ModalDialog>

        <n-modal v-model:show="collect_modalDialog" class="modal-dialog-wrapper" header-style="padding: 10px 20px"
            :mask-closable="false" :style="bodyStyle">
            <n-card style="width: 600px" title="关联采集方案" :bordered="false" size="huge" role="dialog" aria-modal="true">
                <n-form ref="formRef" :model="formRef" label-placement="left" label-align="left" :label-width="160" :style="{
                    maxWidth: '640px',
                }">
                    <n-form-item label="当前选中设备条目:">{{ checkedRowKeysRef.length }}</n-form-item>

                    <n-form-item label="采集方案">
                        <n-select v-model:value="selectCollectValues" filterable placeholder="勾选采集方案"
                            :options="collection_options" />
                    </n-form-item>
                </n-form>
                <template #footer>
                    <div class="flex justify-end">
                        <n-button type="default" size="small" @click="onCancelCollect">取消</n-button>
                        <n-button type="info" size="small" @click="NewConnectCollect">确认</n-button>
                        <!--            <n-button type="primary" size="small" @click="AddConnect">追加关联</n-button>-->
                    </div>
                </template>
            </n-card>
        </n-modal>

        <n-modal v-model:show="import_show" preset="dialog" header-style="padding: 10px 20px" title="设备批量表格导入"
            :style="{ height: '230px', width: '600px' }" :mask-closable="false">
            <input class="input-file" type="file" @change="exportData"
                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
            <n-button @click="download_template">
                下载导入模板
                <!--      <a :href="device_import_template_url">下载导入模板</a>-->
            </n-button>
            <div class="flex justify-end" style="padding-top: 100px">
                <n-space>
                    <n-button @click="import_show = false">取消</n-button>
                    <!--          <n-button type="success" @click="exportData">导入</n-button>-->
                </n-space>
            </div>
        </n-modal>
    </div>
</template>

<script lang="ts">
import {
    device_account_url,
    deviceWebSshLogin,
    getInterfaceUsedList,
    device_import_url,
    getNetworkDeviceList,
    getCmdbIdcList,
    getCmdbRoleList,
    getVendorList,
    getCategoryList,
    get_api_request_log,
    getCmdbModelList,
    getCmdbNetzoneList,
    getCmdbIdcModelList,
    getCmdbRackList,
    getcmdb_accountList,
    getCollection_planList,
    getFrameworkList,
    getAttributeList,
} from '@/api/url'
import { useTable, usePagination, useTableColumn } from '@/hooks/table'
import {
    computed,
    defineComponent,
    h,
    nextTick,
    onMounted,
    reactive,
    ref,
    shallowReactive,
} from 'vue'
import _ from 'lodash'
import * as XLSX from 'xlsx'
import {
    DataTableColumn,
    NInput,
    NSelect,
    NButton,
    NForm,
    NFormItem,
    SelectOption,
    useDialog,
    useMessage,
    NInputGroup,
    NDataTable,
} from 'naive-ui'
import { DataFormType, ModalDialogType, FormItem, TablePropsType } from '@/types/components'
import usePost from '@/hooks/usePost'
import { renderTag } from '@/hooks/form'
import useGet from '@/hooks/useGet'
import usePut from '@/hooks/usePut'
import usePatch from '@/hooks/usePatch'
import { sortColumns } from '@/utils'
import { useLayoutStore } from '@/components'
import Cookies from 'js-cookie'
import router from '@/router'

export default defineComponent({
    name: 'Networkdevice',
    components: {},
    setup() {
        const formRef = ref({})
        const term = ref(null)
        const socket = ref(null)
        const layoutStore = useLayoutStore()
        const bodyStyle = computed(() => ({
            width: layoutStore.state.device === 'mobile' ? '80%' : '50%',
        }))
        const segmented = {
            content: 'soft',
            footer: 'soft',
        }
        const selectValues = ref(null)
        const selectCollectValues = ref('')
        const EditFormOptions = [
      {
        key: 'manage_ip',
        label: '管理地址',
        value: ref(null),
        // optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NInput, {
            value: formItem.value.value,
            onUpdateValue: (newVal: any) => {
              formItem.value.value = newVal
            },
            maxlength: 50,
            placeholder: '',
          })
        },
      },
      {
        key: 'framework',
        label: '网络架构',
        value: ref(null),
        optionItems: [
          { value: 0, label: '' },
          { value: 2, label: '二层' },
          { value: 4, label: '三层' },
          { value: 6, label: '大二层' },
        ],
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            placeholder: '请选择架构',
            filterable: true,
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'vendor',
        label: '供应商',
        value: ref(null),
        optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            filterable: true,
            placeholder: '请选择供应商',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'role',
        label: '设备角色',
        value: ref(null),
        optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            filterable: true,
            placeholder: '请选择角色',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'category',
        label: '类型',
        value: ref(null),
        optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            filterable: true,
            placeholder: '请选择角色',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'idc_model',
        label: '模块',
        value: ref(null),
        optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            filterable: true,
            placeholder: '请选择角色',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },

      {
        label: 'SN号',
        key: 'serial_num',
        value: ref(null),
        render: (formItem) => {
          return h(NInput, {
            value: formItem.value.value,
            onUpdateValue: (val: any) => {
              formItem.value.value = val
            },
            placeholder: '请输入部门编号',
            disabled: true,
          })
        },
      },
      {
        key: 'rack',
        label: '机柜',
        value: ref(null),
        optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            filterable: true,
            placeholder: '请选择角色',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'idc',
        label: '所属机房',
        value: ref(null),
        optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            placeholder: '请选择角色',
            filterable: true,
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'u_location_start',
        label: 'U位起始',
        value: ref(''),
        render: (formItem) => {
          return h(NInputGroup, {}, [
            h(NInput, {
              value: formItem.value.value,
              onUpdateValue: (newVal: any) => {
                formItem.value.value = newVal
              },
              maxlength: 50,
              placeholder: 'U位起始',
            }),

          ])
        },
      },
      {
        key: 'u_location_end',
        label: 'U位结束',
        value: ref(''),
        render: (formItem) => {
          return h(NInputGroup, {}, [
            h(NInput, {
              value: formItem.value.value,
              onUpdateValue: (newVal: any) => {
                formItem.value.value = newVal
              },
              maxlength: 50,
              placeholder: 'U位结束',
            }),

          ])
        },
      },
      {
        key: 'netzone',
        label: '网络区域',
        value: ref(null),
        optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            filterable: true,
            placeholder: '请选择区域',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'memo',
        label: '备注',
        value: ref(null),
        optionItems: shallowReactive([] as Array<SelectOption>),
        render: (formItem) => {
          return h(NInput, {
            value: formItem.value.value,
            onUpdateValue: (newVal: any) => {
              // rowData.u_location_start = newVal
              //  //console.log('formItem.value', rowData)
              formItem.value.value = newVal
            },
          })
        },
      },
      {
        key: 'attribute',
        label: '网络属性',
        value: ref(''),
        optionItems: [
          { value: '', label: '' },
          { value: 2, label: '生产网络' },
          { value: 4, label: '研发网络' },
          { value: 6, label: '研测网络' },
          { value: 8, label: '骨干网络' },
          { value: 10, label: '公网网络' },
          { value: 12, label: '测试网络' },
        ],
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            filterable: true,
            placeholder: '请选择属性',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'status',
        label: '设备状态',
        value: ref<number>(0),
        optionItems: [
          { value: '', label: '' },
          { value: 0, label: '在线' },
          { value: 1, label: '下线' },
          { value: 2, label: '挂牌' },
          { value: 3, label: '备用' },
        ],
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            filterable: true,
            placeholder: '请选择角色',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        key: 'auto_enable',
        label: '数据采集',
        value: ref(null),
        optionItems: [
          { value: '', label: '' },
          { value: true, label: '是' },
          { value: false, label: '否' },
        ],
        render: (formItem) => {
          return h(NSelect, {
            options: formItem.optionItems as Array<SelectOption>,
            value: formItem.value.value,
            placeholder: '请选择',
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
          })
        },
      },
      {
        label: 'id',
        key: 'id',
        value: ref(''),
        render: (formItem) => {
          return h(NInput, {
            value: formItem.value.value,
            disabled: true,
            onUpdateValue: (newVal: any) => {
              // rowData.u_location_start = newVal
              //console.log('formItem.value', rowData)
              formItem.value.value = newVal
            },
          })
        },
      },

    ] as Array<FormItem>
        const connect_account_FormOptions = [
            {
                key: 'account',
                label: '管理账号',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem: any) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        multiple: true,
                        placeholder: '请选择协议端口',
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                            //console.log(val)
                        },
                    })
                },
            },
            // {
            //   key: 'protocol_port',
            //   label: '协议端口',
            //   value: ref(''),
            //   optionItems: [],
            //   render: (formItem: any) => {
            //     return h(NSelect, {
            //       options: formItem.optionItems as Array<SelectOption>,
            //       value: formItem.value.value,
            //       placeholder: '请选择协议端口',
            //       onUpdateValue: (val) => {
            //         formItem.value.value = val
            //       },
            //     })
            //   },
            // },
        ]
        const device_import_template_url = ref('')
        const importFormOptions = [
            {
                key: 'manage_ip',
                label: '管理地址',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NInput, {
                        value: formItem.value.value,
                        onUpdateValue: (newVal: any) => {
                            formItem.value.value = newVal
                        },
                        maxlength: 50,
                        placeholder: '',
                    })
                },
            },
            {
                key: 'framework',
                label: '网络架构',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择架构',
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'vendor',
                label: '供应商',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择供应商',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'role',
                label: '设备角色',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择角色',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'category',
                label: '类型',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择设备类型',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'idc',
                label: '所属机房',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        filterable: true,
                        placeholder: '请选择机房',
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        'on-update:value': get_info_by_idc.bind(formItem.value.value),
                    })
                },
            },
            {
                key: 'idc_model',
                label: '模块',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        filterable: true,
                        placeholder: '请选择模块',
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        'on-update:value': get_info_by_idc_model.bind(formItem.value.value),
                    })
                },
            },
            {
                key: 'serial_num',
                label: 'SN号',
                value: ref(''),
                render: (formItem) => {
                    return h(NInput, {
                        value: formItem.value.value,
                        onUpdateValue: (val: any) => {
                            formItem.value.value = val
                        },
                        placeholder: '请输入序列号',
                    })
                },
            },
            {
                key: 'rack',
                label: '机柜',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择机柜',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'u_location',
                label: 'U位置',
                value: ref(''),
                render: (formItem) => {
                    return h(NInputGroup, {}, [
                        h(NInput, {
                            value: formItem.value.value.split('-')[0],
                            onUpdateValue: (newVal: any) => {
                                // rowData.u_location_start = newVal
                                //console.log('formItem.value', rowData)
                                formItem.value.value = newVal
                            },
                            maxlength: 50,
                            placeholder: 'U位起始',
                        }),
                        h(NInput, {
                            value: formItem.value.value.split('-')[1],
                            onUpdateValue: (newVal: any) => {
                                formItem.value.value = newVal
                            },
                            maxlength: 50,
                            placeholder: 'U位结束',
                        }),
                    ])
                },
            },
            {
                key: 'netzone',
                label: '网络区域',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        filterable: true,
                        // disabled: checkedValueRef.value,
                        placeholder: '请选择网络区域',
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'memo',
                label: '备注信息',
                value: ref(''),

                render: (formItem) => {
                    return h(NInput, {
                        value: formItem.value.value,
                        onUpdateValue: (val: any) => {
                            formItem.value.value = val
                        },
                        placeholder: '请输入备注信息',
                    })
                },
            },
            {
                key: 'attribute',
                label: '网络属性',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        filterable: true,
                        placeholder: '请选择网络属性',
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'status',
                label: '设备状态',
                value: ref<number>(0),
                optionItems: [
                    { value: '', label: '' },
                    { value: 0, label: '在线' },
                    { value: 1, label: '下线' },
                    { value: 2, label: '挂牌' },
                    { value: 3, label: '备用' },
                ],
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择状态',
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'auto_enable',
                label: '数据采集',
                value: ref<number>(1),
                optionItems: [
                    { label: '是', value: 1 },
                    { label: '否', value: 0 },
                ],
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择是否',
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
        ] as Array<FormItem>
        const conditionItems: Array<FormItem> = [
            {
                key: 'name',
                label: '设备名',
                value: ref(''),
                render: (formItem) => {
                    return h(NInput, {
                        value: formItem.value.value,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        onKeyup: (Event) => {
                            if (Event.keyCode == 13) {
                                onSearch()
                            }
                        },
                        placeholder: '请输入设备名',
                    })
                },
            },
            {
                key: 'vendor',
                label: '供应商',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择供应商',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        'on-update:value': get_info_by_vendor.bind(formItem.value.value),
                    })
                },
            },
            {
                key: 'idc',
                label: '机房',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择机房',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        'on-update:value': get_info_by_idc.bind(formItem.value.value),
                    })
                },
            },
            {
                key: 'role',
                label: '角色',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择角色',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'manage_ip',
                label: '管理IP',
                value: ref(''),
                render: (formItem) => {
                    return h(NInput, {
                        value: formItem.value.value,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        onKeyup: (Event) => {
                            if (Event.keyCode == 13) {
                                onSearch()
                            }
                        },
                        placeholder: '请输入管理IP',
                    })
                },
            },
            {
                key: 'category',
                label: '类型',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择类型',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'idc_model',
                label: '模块',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择模块',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        'on-update:value': get_info_by_idc_model.bind(formItem.value.value),
                    })
                },
            },

            {
                key: 'netzone',
                label: '区域',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择区域',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'serial_num',
                label: '序列号',
                value: ref(''),
                render: (formItem) => {
                    return h(NInput, {
                        value: formItem.value.value,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        onKeyup: (Event) => {
                            if (Event.keyCode == 13) {
                                onSearch()
                            }
                        },
                        placeholder: '请输入序列号',
                    })
                },
            },
            {
                key: 'model',
                label: '型号',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择型号',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'rack',
                label: '机柜',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择机柜',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },

            {
                key: 'status',
                label: '状态',
                value: ref('0'),
                optionItems: [
                    { value: '', label: '' },
                    { value: '0', label: '在线' },
                    { value: '1', label: '下线' },
                    { value: '2', label: '挂牌' },
                    { value: '3', label: '备用' },
                ],
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择状态',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'framework',
                label: '网络架构',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择网络架构',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'attribute',
                label: '网络属性',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择网络属性',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },

            {
                key: 'u_location_start',
                label: 'U位',
                value: ref(''),
                render: (formItem) => {
                    return h(NInput, {
                        value: formItem.value.value,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        onKeyup: (Event) => {
                            if (Event.keyCode == 13) {
                                onSearch()
                            }
                        },
                        placeholder: '起始U位',
                    })
                },
            },
            {
                key: 'plan',
                label: '采集方案',
                value: ref(''),
                optionItems: shallowReactive([] as Array<SelectOption>),
                render: (formItem) => {
                    return h(NSelect, {
                        options: formItem.optionItems as Array<SelectOption>,
                        value: formItem.value.value,
                        placeholder: '请选择采集方案',
                        filterable: true,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                    })
                },
            },
            {
                key: 'search',
                label: '搜索',
                value: ref(''),
                render: (formItem) => {
                    return h(NInput, {
                        value: formItem.value.value,
                        onUpdateValue: (val) => {
                            formItem.value.value = val
                        },
                        onKeyup: (Event) => {
                            if (Event.keyCode == 13) {
                                onSearch()
                            }
                        },
                        placeholder: '请输入关键字',
                    })
                },
            },
        ]
        const table = useTable()
        const pagination = usePagination(doRefresh)
        pagination.pageSize = 10
        pagination.limit = 10
        pagination.start = 0
        const searchForm = ref<DataFormType | null>(null)
        const searchDataFormRef = ref<DataFormType | null>(null)
        const rowData = ref<Object | null>(null)
        const message = useMessage()
        const naiveDailog = useDialog()
        const edit_rowData = ref<Object | null>(null)
        const tableColumns = reactive(
            useTableColumn(
                [
                    table.selectionColumn,
                    // table.indexColumn,row_expand.bind(null,rowData)
                    {
                        type: 'expand',
                        expandable: (rowData) => true,
                        renderExpand: (rowData) => {
                            return h('DataForm', { preset: 'grid-item' }, [
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: '设备名:',
                                                style: {
                                                    height: '0px',
                                                    width: '32%',
                                                },
                                            },
                                            () => h('span', {}, '' + rowData.name)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '供应商: ',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.vendor_name)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '所属机房:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.idc_name)
                                        ),
                                    ]
                                ),
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: '管理IP:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.manage_ip)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '设备类型:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.category_name)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '所属区域:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.netzone_name)
                                        ),
                                    ]
                                ),
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: '序列号:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.serial_num)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '硬件型号:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.model_name)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '设备角色:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.role_name)
                                        ),
                                    ]
                                ),
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: '设备状态:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.status_name)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '软件版本:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.soft_version)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '机房模块:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.idc_model_name)
                                        ),
                                    ]
                                ),
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: 'HA状态:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.ha_status_name)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '补丁版本:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.patch_version)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '机柜:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.rack_name)
                                        ),
                                    ]
                                ),
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: '框式编号:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.slot)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '上线日期:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.uptime)
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: 'U位:',
                                                style: { width: '32%' },
                                            },
                                            () =>
                                                h(
                                                    'span',
                                                    {},
                                                    '' + rowData.u_location_start + '-' + rowData.u_location_end
                                                )
                                        ),
                                    ]
                                ),
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: '备注\n:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, ' ' + rowData.memo)
                                        ),

                                        h(NFormItem, { label: '监控状态\n:', style: { width: '32%' } }, () =>
                                            h(
                                                'span',
                                                {
                                                    style: {
                                                        backgroundColor:
                                                            status_check.value === '正常' ? '#00a65a' : '#d03050',
                                                    },
                                                    // size: 'small',
                                                },
                                                ' ' + status_check.value
                                            )
                                        ),
                                        h(NFormItem, { label: '变更轨迹\n:', style: { width: '32%' } }, () =>
                                            h(
                                                NButton,
                                                {
                                                    text: true,
                                                    color: '#204d74',
                                                    onclick: change_handleClick.bind(null, rowData),
                                                },
                                                () => h('span', {}, '变更轨迹')
                                            )
                                        ),
                                        // () => h('span',
                                        // //     {
                                        // //   type: status_check  ? 'success' : 'error', size: 'small',
                                        // // },
                                        //     {},
                                        // '监控状态: ' + status_check ? '正常' : '异常',)),
                                        ,
                                    ]
                                ),
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: '1G端口使用\n:',
                                                style: {
                                                    width: '15%',
                                                },
                                                hidden: !int_used_obj.value['int_unused_1g'],
                                            },
                                            () =>
                                                h(
                                                    'span',
                                                    {},
                                                    ' ' +
                                                    int_used_obj.value['int_used_1g'] +
                                                    '/' +
                                                    (parseInt(int_used_obj.value['int_used_1g']) +
                                                        parseInt(int_used_obj.value['int_unused_1g']))
                                                )
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '10G端口使用\n:',
                                                style: {
                                                    width: '15%',
                                                },
                                                hidden: !int_used_obj.value['int_unused_10g'],
                                            },
                                            () =>
                                                h(
                                                    'span',
                                                    {},
                                                    '' +
                                                    int_used_obj.value['int_used_10g'] +
                                                    '/' +
                                                    (parseInt(int_used_obj.value['int_used_10g']) +
                                                        parseInt(int_used_obj.value['int_unused_10g']))
                                                )
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '40G端口使用\n:',
                                                style: {
                                                    width: '15%',
                                                },
                                                hidden: !int_used_obj.value['int_used_40g'],
                                            },
                                            () =>
                                                h(
                                                    'span',
                                                    {},
                                                    ' ' +
                                                    int_used_obj.value['int_used_40g'] +
                                                    '/' +
                                                    (parseInt(int_used_obj.value['int_used_40g']) +
                                                        parseInt(int_used_obj.value['int_unused_40g']))
                                                )
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '100G端口使用\n:',
                                                style: {
                                                    width: '15%',
                                                },
                                                hidden: !int_used_obj.value['int_unused_100g'],
                                            },
                                            () =>
                                                h(
                                                    'span',
                                                    {},
                                                    '' +
                                                    int_used_obj.value['int_used_100g'] +
                                                    '/' +
                                                    (parseInt(int_used_obj.value['int_used_100g']) +
                                                        parseInt(int_used_obj.value['int_unused_100g']))
                                                )
                                        ),
                                        h(
                                            NFormItem,
                                            {
                                                label: '共计使用\n:',
                                                style: { width: '15%' },
                                                hidden: !int_used_obj.value['int_used'],
                                            },
                                            () =>
                                                h(
                                                    'span',
                                                    {},
                                                    '' +
                                                    int_used_obj.value['int_used'] +
                                                    '/' +
                                                    parseInt(int_used_obj.value['int_total'])
                                                )
                                        ),
                                    ]
                                ),
                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px', width: '100%' },
                                    },
                                    [
                                        h(NFormItem, { label: '账户', style: { width: '30%', fontWeight: 'bold' } }, [
                                            h(
                                                NButton,
                                                {
                                                    text: true,
                                                    color: '#204d74',
                                                    onclick: show_account_handleClick.bind(null, rowData),
                                                },
                                                () => h('span', {}, '查看账户')
                                            ),
                                            h(
                                                NButton,
                                                {
                                                    text: true,
                                                    color: '#204d74',
                                                    onclick: connect_account_handleClick.bind(null, rowData),
                                                },
                                                () => h('span', {}, '关联账户')
                                            ),
                                            h(
                                                NButton,
                                                {
                                                    text: true,
                                                    color: '#204d74',
                                                    onclick: BindIP_handleClick.bind(null, rowData),
                                                },
                                                () => h('span', {}, '绑定IP')
                                            ),
                                        ]),
                                        h(
                                            NFormItem,
                                            {
                                                label: '绑定IP信息',
                                                hidden: rowData.bind_ip.length === 0,
                                                style: { width: '30%', paddingLeft: '10px' },
                                            },
                                            () =>
                                                h(NDataTable, {
                                                    data: rowData.bind_ip,
                                                    size: 'small',
                                                    hidden: rowData.bind_ip.length === 0,
                                                    columns: [
                                                        {
                                                            title: 'IP标识名',
                                                            key: 'name',
                                                            width: 100,
                                                            render(row, index) {
                                                                return h('span', row.split('-')[0])
                                                            },
                                                        },
                                                        {
                                                            title: 'IP地址',
                                                            key: 'ip',
                                                            width: 150,
                                                            render(row, index) {
                                                                return h('span', row.split('-')[1])
                                                            },
                                                        },
                                                    ],
                                                })
                                        ),
                                    ]
                                ),

                                h(
                                    NForm,
                                    {
                                        labelWidth: '160px',
                                        inline: true,
                                        labelPlacement: 'left',
                                        style: { height: '5px', fontSize: '12px', width: '100%' },
                                    },
                                    [
                                        h(
                                            NFormItem,
                                            {
                                                label: '采集方案:',
                                                style: { width: '32%' },
                                            },
                                            () => h('span', {}, '' + rowData.plan_name)
                                        ),
                                    ]
                                ),
                            ])
                        },
                    },
                    {
                        title: '设备名称',
                        key: 'name',
                        width: 150,
                        fixed: 'left',
                    },
                    {
                        title: '管理IP',
                        key: 'manage_ip',
                        width: 120,
                    },
                    {
                        title: '厂商',
                        key: 'vendor_name',
                        width: 100,
                    },
                    {
                        title: '型号',
                        key: 'model_name',
                        width: 100,
                    },
                    {
                        title: '类型',
                        key: 'category_name',
                        width: 100,
                    },
                    {
                        title: '机房',
                        key: 'idc_name',
                        width: 100,
                    },
                    {
                        title: '区域',
                        key: 'netzone_name',
                        width: 100,
                    },
                    {
                        title: '角色',
                        key: 'role_name',
                        width: 100,
                    },
                    {
                        title: '状态',
                        key: 'status_name',
                        width: 80,
                    },
                    {
                        title: '自动化',
                        key: 'auto_enable',
                        width: 60,
                        render: (rowData) =>
                            renderTag(!!rowData.auto_enable ? '启用' : '禁用', {
                                type: !!rowData.auto_enable ? 'success' : 'error',
                                size: 'small',
                            }),
                    },
                    {
                        title: '机柜',
                        key: 'rack_name',
                        width: 80,
                    },
                    {
                        title: 'U位',
                        key: 'u_location_start',
                        width: 120,
                        render: (rowData) => {
                            return rowData.u_location_start + '-' + rowData.u_location_end
                        },
                    },
                    {
                        title: '编辑',
                        key: 'edit',
                        fixed: 'right',
                        width: 80,
                        render: (rowData) => {
                            return h(
                                NButton,
                                {
                                    type: 'info',
                                    size: 'tiny',
                                    onClick: EditFunction.bind(null, rowData),
                                },
                                () => h('span', {}, 'EDIT')
                            )
                            // return useRenderAction([
                            //   {
                            //     label: 'Edit',
                            //     onClick: EditFunction.bind(null, rowData),
                            //   },
                            //
                            // ] as TableActionModel[])
                        },
                    },
                    {
                        title: 'WEBSSH',
                        key: 'webssh',
                        fixed: 'right',
                        width: 80,
                        render: (rowData) => {
                            return h(
                                NButton,
                                {
                                    type: 'success',
                                    size: 'tiny',
                                    onClick: onWebssh.bind(null, rowData),
                                },
                                () => h('span', {}, 'WEBSSH')
                            )
                            // return useRenderAction([
                            //   {
                            //     label: 'WEBSSH',
                            //     onClick: onWebssh.bind(null, rowData),
                            //   },
                            //
                            // ] as TableActionModel[])
                        },
                    },
                    {
                        title: '复制',
                        key: 'actions',
                        fixed: 'right',
                        width: 80,
                        render: (rowData) => {
                            return h(
                                NButton,
                                {
                                    type: 'warning',
                                    size: 'tiny',
                                    onClick: Copy.bind(null, rowData),
                                },
                                () => h('span', {}, '信息复制')
                            )
                            // return useRenderAction([
                            //   {
                            //     label: 'WEBSSH',
                            //     onClick: onWebssh.bind(null, rowData),
                            //   },
                            //
                            // ] as TableActionModel[])
                        },
                    },
                ],
                {
                    align: 'center',
                } as DataTableColumn
            )
        )
        const account_tableColumns = reactive(
            useTableColumn(
                [
                    {
                        title: '账户',
                        key: 'name',
                    },
                    {
                        title: '用户名',
                        key: 'username',
                    },
                    {
                        title: '密码',
                        key: 'password',
                    },
                    {
                        title: '协议',
                        key: 'protocol',
                    },
                    {
                        title: '端口',
                        key: 'port',
                        width: 100,
                    },
                ],
                { align: 'center' } as DataTableColumn
            )
        )
        const itemDataFormRef = ref<DataFormType | null>(null)
        const importDataFormRef = ref<DataFormType | null>(null)
        const connect_account_DataFormRef = ref<DataFormType | null>(null)
        const EditDataFormRef = ref<DataFormType | null>(null)
        // const searchDataFormRef = ref<DataFormType | null>(null)
        const modalDialog = ref<ModalDialogType | null>(null)
        const WebsshmodalDialog = ref<ModalDialogType | null>(null)
        const ChangeLogmodalDialog = ref<ModalDialogType | null>(null)
        const show_password_modalDialog = ref<ModalDialogType | null>(null)
        const connect_account_modalDialog = ref<ModalDialogType | null>(null)
        const account_modalDialog = ref<ModalDialogType | null>(null)
        const device_import_modalDialog = ref<ModalDialogType | null>(null)
        const bind_ip_modalDialog = ref<ModalDialogType | null>(null)
        const device_import_dialog = useDialog()
        const collect_modalDialog = ref(false)
        const report_modalDialog = ref(false)
        const device_data_show = ref(false)
        const int_used_obj = ref({})
        const current_row_data = ref(null)
        const status_check = ref('')
        const change_log_tableColumns = reactive(
            useTableColumn(
                [
                    {
                        title: '用户名',
                        key: 'username',
                        width: 100,
                    },
                    {
                        title: '方法',
                        key: 'view_method',
                        width: 120,
                    },
                    {
                        title: '登录IP',
                        key: 'remote_addr',
                        width: 150,
                    },
                    {
                        title: '操作数据',
                        key: 'data',
                    },
                    {
                        title: '时间',
                        key: 'requested_at',
                        width: 120,
                    },
                ],
                {
                    align: 'center',
                } as DataTableColumn
            )
        )
        const change_log_list = shallowReactive([]) as Array<any>
        const account_list = shallowReactive([]) as Array<any>
        const account_page = ref<number>(1)
        const account_pageSize = ref<number>(10)
        const account_pageCount = ref<number>(1)
        const change_log_page = ref<number>(1)
        const change_log_pageSize = ref<number>(10)
        const change_log_pageCount = ref<number>(1)
        const change_log_keyword = ref('')
        const second_password = ref('')
        const bind_ip_form = ref({
            name: '',
            ip: '',
        })
        const change_log_pageSizes = [
            {
                label: '10 每页',
                value: 10,
            },
            {
                label: '50 每页',
                value: 50,
            },
            {
                label: '100 每页',
                value: 100,
            },
            {
                label: '200 每页',
                value: 200,
            },
        ]
        const account_pageSizes = [
            {
                label: '10 每页',
                value: 10,
            },
            {
                label: '50 每页',
                value: 50,
            },
            {
                label: '100 每页',
                value: 100,
            },
            {
                label: '200 每页',
                value: 200,
            },
        ]
        const get = useGet()
        const post = usePost()
        const put = usePut()
        const patch = usePatch()
        const checkedRowKeysRef = ref([])
        const collection_options = shallowReactive([]) as Array<any>
        const framework_options = shallowReactive([]) as Array<any>
        const attribute_options = shallowReactive([]) as Array<any>
        const report_options = shallowReactive([]) as Array<any>
        const import_show = ref(false)
        const device_info = ref(0)

        function btnClick() {
            import_show.value = true
            // document.querySelector('.input-file').click()
        }

        function download_template() {
            // window.open(device_import_url)
            // let postdata = 'areaName='+obj.areaName+'&areaCode='+obj.areaCode+'&schoolName='+obj.schoolName+'&studentName='+obj.studentName+'&studentExamNumber='+obj.studentExamNumber+'&state='+obj.state+'&subjectName='+obj.subjectName+'&readTeacher='+obj.readTeacher;
            let xhr = new XMLHttpRequest()
            // xhr.setRequestHeader('Authorization', Cookies.get('netops-token'))
            xhr.responseType = 'arraybuffer'
            xhr.open('get', device_import_url, true)
            // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    let blob = new Blob([xhr.response], {
                        type: 'application/vnd.ms-excel',
                    })
                    let link = document.createElement('a')
                    link.href = window.URL.createObjectURL(blob)
                    link.download = 'import_template.xlsx'
                    link.click()
                    window.URL.revokeObjectURL(link.href)
                }
            }
            xhr.send()
        }

        function exportData(event) {
            //console.log(event)
            // if (!event.currentTarget.files.length) {
            //   return
            // }

            let f = event.currentTarget.files[0]

            const import_data = new FormData()
            let csrf_token = Cookies.get('csrftoken')
            import_data.append('csrfmiddlewaretoken', csrf_token)
            import_data.append('file', f)
            post({
                url: device_import_url,
                data: import_data,
            }).then((res) => {
                //console.log(res)
                if (res.code === 200) {
                    message.success(res.msg)
                    nextTick(() => {
                        import_show.value = false
                        doRefresh()
                    })
                } else {
                    message.error('导入失败:' + res.msg)
                }
            })

            // //这里已经拿到了excel的file文件，若是项目需求，可直接$emit丢出文件
            // // that.$emit('getMyExcelData',f);
            // // 用FileReader来读取
            // let reader = new FileReader()
            // // 重写FileReader上的readAsBinaryString方法
            // // FileReader.prototype.readAsBinaryString = function(f) {
            // //   let binary = "";
            // //   let wb; // 读取完成的数据
            // //   let outdata; // 你需要的数据
            // //   let reader = new FileReader();
            // reader.onload = function(e) {
            //   // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
            //   // let bytes = new Uint8Array(reader.result);
            //   // let length = bytes.byteLength;
            //   // for (let i = 0; i < length; i++) {
            //   //   binary += String.fromCharCode(bytes[i]);
            //   // }
            //   // var data = e.target.result
            //
            //   // 接下来就是xlsx
            //   // var wb = XLSX.read(data, {
            //   //   type: 'buffer',
            //   // })
            //   // var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
            //   // 导出格式为json，{表数据：[]}
            //   //  //console.log('表格数据', outdata)
            //   // that.excelData = outdata
            //   // that.tableData = outdata.slice(0, 10)
            //   // that.tableData = outdata
            //   // that.total = outdata.length
            //
            //   // 获取数据的key
            //   // var importDataThead = Array.from(Object.keys(outdata[0])).map(
            //   //     (item) => {
            //   //       return item
            //   //     },
            //   // )
            //
            //   // that.columnHeader = importDataThead
            //   // that.checkboxTableColumn = importDataThead.slice(0, 9)
            //   // that.checkboxTableColumn = importDataThead.slice(0, 9)
            //   //  //console.log('表头', importDataThead)
            // }
            // reader.readAsArrayBuffer(f)
            // // };
            // // reader.readAsBinaryString(f);
        }

        function NewConnectCollect() {
            collect_modalDialog.value = false
            checkedRowKeysRef.value.forEach((devid) => {
                let collect_data = new FormData()
                let dev_detail_info = table.dataList.filter((item) => item.id === devid)[0]
                collect_data.append('plan', selectCollectValues.value)
                collect_data.append('serial_num', dev_detail_info['serial_num'])
                patch({
                    url: getNetworkDeviceList + devid + '/',
                    data: collect_data,
                }).then((res) => {
                    message.success('新关联方案成功')
                    doRefresh()
                    checkedRowKeysRef.value.length = 0
                })
            })
        }

        function NewConnectReport() {
            report_modalDialog.value = false
            checkedRowKeysRef.value.forEach((devid) => {
                let report_data = new FormData()
                let dev_detail_info = table.dataList.filter((item) => item.id === devid)[0]
                report_data.append('report', selectCollectValues.value)
                report_data.append('serial_num', dev_detail_info['serial_num'])
                patch({
                    url: getNetworkDeviceList + '/' + devid + '/',
                    data: report_data,
                }).then((res) => {
                    if (res.code === 200) {
                        message.success('新关联告警通知方案成功')
                        doRefresh()
                        checkedRowKeysRef.value.length = 0
                    }
                })
            })
        }

        function onCancelCollect() {
            collect_modalDialog.value = false
            checkedRowKeysRef.value.length = 0
        }

        function row_expand(row: Record<string, unknown>) {
            //console.log('当前行', row)
        }

        function onSearch() {
            let request_url = ''
            // if (item) {
            //   request_url = getNetworkDeviceList + '?search=' + item
            // } else {
            const search_form = searchForm.value?.generatorParams()
            searchDataFormRef.value = search_form
            request_url =
                getNetworkDeviceList +
                '?name=' +
                search_form.name +
                '&manage_ip=' +
                search_form.manage_ip +
                '&vendor=' +
                search_form.vendor +
                '&idc=' +
                search_form.idc +
                '&role=' +
                search_form.role +
                '&category=' +
                search_form.category +
                '&serial_num=' +
                search_form.serial_num +
                '&framework=' +
                search_form.framework +
                '&attribute=' +
                search_form.attribute +
                '&plan=' +
                search_form.plan +
                '&model=' +
                search_form.model +
                '&netzone=' +
                search_form.netzone +
                '&idc_model=' +
                search_form.idc_model +
                '&status=' +
                search_form.status +
                '&search=' +
                search_form.search +
                '&rack=' +
                search_form.rack
            // }

            //  //console.log(searchForm.value?.generatorParams())

            get({
                url: request_url,
                data: () => {
                    return {
                        start: 0,
                        // pageSize: pagination.pageSize,
                        limit: pagination.pageSize,
                    }
                },
            }).then((res) => {
                //  //console.log(res)
                if (res.code === 200) {
                    // message.success('查询成功')
                    table.handleSuccess(res)
                    pagination.setTotalSize(res.count || 10)
                } else {
                    message.success('查询失败:' + res.msg)
                    table.handleSuccess(res)
                    pagination.setTotalSize(res.count || 10)
                }
            })
        }

        function onResetSearch() {
            searchForm.value?.reset()
        }

        function onUpdateBorder(isBordered: boolean) {
            table.bordered.value = isBordered
        }

        function onUpdateTable(newColumns: Array<TablePropsType>) {
            sortColumns(tableColumns, newColumns)
        }

        function doRefresh() {
            // device_import_template_url.value = device_import_url
            //console.log(searchDataFormRef.value)
            let request_url = ''
            let search_form = searchDataFormRef.value
            let info_host_list = sessionStorage.getItem('hostlist')
            let last_path = sessionStorage.getItem('last_path')
            if (last_path === '/cmdb/network_device') {
                // return
                sessionStorage.removeItem('last_path')
                window.location.reload()
            }
            if (searchDataFormRef.value === null) {
                request_url = getNetworkDeviceList
            } else {
                request_url =
                    getNetworkDeviceList +
                    '?name=' +
                    search_form.name +
                    '&manage_ip=' +
                    search_form.manage_ip +
                    '&vendor=' +
                    search_form.vendor +
                    '&idc=' +
                    search_form.idc +
                    '&role=' +
                    search_form.role +
                    '&category=' +
                    search_form.category +
                    '&serial_num=' +
                    search_form.serial_num +
                    '&framework=' +
                    search_form.framework +
                    '&attribute=' +
                    search_form.attribute +
                    '&plan=' +
                    search_form.plan +
                    '&model=' +
                    search_form.model +
                    '&netzone=' +
                    search_form.netzone +
                    '&idc_model=' +
                    search_form.idc_model +
                    '&status=' +
                    search_form.status +
                    '&search=' +
                    search_form.search
            }
            if (info_host_list) {
                request_url = getNetworkDeviceList + '?search_host_list=' + info_host_list
            }
            if (info_host_list === '') {
                // message.error("检索无数据")
                request_url = getNetworkDeviceList
            }
            get({
                url: request_url,
                data: () => {
                    return {
                        start: (pagination.page - 1) * pagination.pageSize,
                        // pageSize: pagination.pageSize,
                        limit: pagination.pageSize,
                        status: 0,
                    }
                },
            }).then((res) => {
                //  //console.log(res)
                table.handleSuccess(res)
                pagination.setTotalSize(res.count || 10)
            })
        }

        function doIdc() {
            get({
                url: getCmdbIdcList,
                data: () => {
                    return {
                        limit: 1000,
                    }
                },
            }).then((res) => {
                //  //console.log('idc_res', res)
                //  //console.log(conditionItems)
                const idc_list = res.results
                for (var i = 0; i < idc_list.length; i++) {
                    const dict = {
                        label: idc_list[i]['name'],
                        value: idc_list[i]['id'],
                    }
                    if (conditionItems[2].optionItems != undefined) {
                        conditionItems[2].optionItems.push(dict)
                    }
                    if (importFormOptions[5].optionItems != undefined) {
                        importFormOptions[5].optionItems.push(dict)
                    }
                    if (EditFormOptions[8].optionItems !== undefined) {
                        EditFormOptions[8].optionItems.push(dict)
                    }
                }
                nextTick(() => {
                    conditionItems[2].optionItems.splice(0, 0, { label: '', value: '' })
                    EditFormOptions[8].optionItems.splice(0, 0, { label: '', value: '' })
                    importFormOptions[5].optionItems.splice(0, 0, { label: '', value: '' })
                })
            })
        }

        function doVendor() {
            get({
                url: getVendorList,
                data: () => {
                    return {
                        limit: 1000,
                    }
                },
            }).then((res) => {
                //  //console.log('vendor_res', res)
                //  //console.log(conditionItems)
                const idc_list = res.results
                for (var i = 0; i < idc_list.length; i++) {
                    const dict = {
                        label: idc_list[i]['name'],
                        value: idc_list[i]['id'],
                    }
                    if (conditionItems[1].optionItems != undefined) {
                        conditionItems[1].optionItems.push(dict)
                    }

                    if (EditFormOptions[2].optionItems != undefined) {
                        EditFormOptions[2].optionItems.push(dict)
                    }
                    if (importFormOptions[2].optionItems != undefined) {
                        importFormOptions[2].optionItems.push(dict)
                    }
                }
                nextTick(() => {
                    conditionItems[1].optionItems.splice(0, 0, { label: '', value: '' })
                    EditFormOptions[2].optionItems.splice(0, 0, { label: '', value: '' })
                    importFormOptions[2].optionItems.splice(0, 0, { label: '', value: '' })
                })
            })
        }

        function doRole() {
            get({
                url: getCmdbRoleList,
                data: () => {
                    return {
                        limit: 1000,
                    }
                },
            }).then((res) => {
                //  //console.log('role_res', res)
                //  //console.log(conditionItems)
                const idc_list = res.results
                for (var i = 0; i < idc_list.length; i++) {
                    const dict = {
                        label: idc_list[i]['name'],
                        value: idc_list[i]['id'],
                    }
                    if (conditionItems[3].optionItems != undefined) {
                        conditionItems[3].optionItems.push(dict)
                        // conditionItems[3].optionItems.splice(0, 0, {
                        //   label: '',
                        //   value: ''
                        // });
                    }
                    if (EditFormOptions[3].optionItems != undefined) {
                        EditFormOptions[3].optionItems.push(dict)
                    }
                    if (importFormOptions[3].optionItems != undefined) {
                        importFormOptions[3].optionItems.push(dict)
                    }
                }
            })
        }

        function doCagetory() {
            get({
                url: getCategoryList,
                data: () => {
                    return {
                        limit: 1000,
                    }
                },
            }).then((res) => {
                //  //console.log('category_res', res)
                //  //console.log(conditionItems)
                const idc_list = res.results
                for (var i = 0; i < idc_list.length; i++) {
                    const dict = {
                        label: idc_list[i]['name'],
                        value: idc_list[i]['id'],
                    }
                    if (conditionItems[5].optionItems != undefined) {
                        conditionItems[5].optionItems.push(dict)
                    }
                    if (EditFormOptions[4].optionItems != undefined) {
                        EditFormOptions[4].optionItems.push(dict)
                    }
                    if (importFormOptions[4].optionItems != undefined) {
                        importFormOptions[4].optionItems.push(dict)
                    }
                }
            })
        }

        function device_import() {
            device_import_modalDialog.value?.toggle()
        }

        function importDataFormConfirm() {
            if (importDataFormRef.value?.validator()) {
                let myDate = new Date()
                let year = myDate.getFullYear() //获取当前年
                let endyear = myDate.getFullYear() + 3 //获取当前年
                let mon = myDate.getMonth() + 1 //获取当前月
                let date = myDate.getDate()
                device_import_modalDialog.value?.toggle()
                let import_form = importDataFormRef.value.generatorParams()
                //console.log('设备录入参数', import_form)
                let import_formdata = new FormData()
                import_formdata.append('manage_ip', import_form['manage_ip'])
                import_formdata.append('vendor', import_form['vendor'])
                import_formdata.append('category', import_form['category'])
                import_formdata.append('serial_num', import_form['serial_num'])
                import_formdata.append('idc', import_form['idc'])
                import_formdata.append('netzone', import_form['netzone'])
                import_formdata.append('attribute', import_form['attribute'])
                import_formdata.append('framework', import_form['framework'])
                import_formdata.append('role', import_form['role'])
                import_formdata.append('idc_model', import_form['idc_model'])
                import_formdata.append('rack', import_form['rack'])
                import_formdata.append('u_location_start', import_form['u_location'])
                import_formdata.append('u_location_end', import_form['u_location'])
                import_formdata.append('memo', import_form['memo'])
                import_formdata.append('status', import_form['status'])
                import_formdata.append('auto_enable', import_form['auto_enable'])
                import_formdata.append('expire', '2099-01-01')
                import_formdata.append('uptime', year + '-' + mon + '-' + date)
                import_formdata.set('uptime', year + '-' + mon + '-' + date)
                let vendor_id = import_form['vendor']
                if (vendor_id === 2) {
                    import_formdata.append('plan', '13')
                }
                post({
                    url: getNetworkDeviceList,
                    data: import_formdata,
                }).then((res) => {
                    console.log('res', res)
                    if (res.code === 400) {
                        message.error(res.message)
                    } else {
                        nextTick(() => {
                            message.success('设备录入成功,SN号:' + JSON.stringify(import_form.serial_num))
                            doRefresh()
                        })
                    }
                    // if (res.code === 201) {
                    // var monitor_data = new FormData()
                    // monitor_data.append('serial_num', import_form['serial_num'])
                    // 添加监控
                    // post({
                    //   url: networkDeviceUrl,
                    //   data: monitor_data,
                    // }).then((res) => {
                    //   if (res.data === 200) {
                    //     message.success(res.result)
                    //   } else {
                    //   }
                    // })
                    // get({
                    //   url: networkDeviceUrl,
                    //   data: () => {
                    //     return {
                    //       bgbu: JSON.stringify(['16', '80']),
                    //       id: res.data['id'],
                    //     }
                    //   },
                    // }).then((res) => {
                    //   if (res.code === 200) {
                    //     message.success(res.data['msg'])
                    //   }
                    // })

                    // }
                })

                // importDataFormRef.value?.reset()
            }
        }

        function EditConfirm() {
            //  //console.log('编辑确认提交', EditDataFormRef.value.generatorParams())
            modalDialog.value!.toggle()
            let device_info = EditDataFormRef.value.generatorParams()
            let edit_formdata = new FormData()
            edit_formdata.append('manage_ip', device_info['manage_ip'])
            edit_formdata.append('framework', device_info['framework'])
            edit_formdata.append('vendor', device_info['vendor'])
            edit_formdata.append('role', device_info['role'])
            edit_formdata.append('category', device_info['category'])
            edit_formdata.append('idc_model', device_info['idc_model'])
            edit_formdata.append('rack', device_info['rack'])
            edit_formdata.append('idc', device_info['idc'])
            edit_formdata.append('u_location_start', device_info['u_location_start'])
            edit_formdata.append('u_location_end', device_info['u_location_end'])
            edit_formdata.append('memo', device_info['memo'])
            edit_formdata.append('attribute', device_info['attribute'])
            edit_formdata.append('status', device_info['status'])
            edit_formdata.append('auto_enable', device_info['auto_enable'])
            edit_formdata.append('zone', device_info['netzone'])
            edit_formdata.append('serial_num', device_info['serial_num'])
            edit_formdata.append('auto_enable', device_info['auto_enable'])
            patch({
                url: getNetworkDeviceList + '/' + device_info.id + '/',
                data: edit_formdata,
            }).then((res) => {
                if (res.code === 400) {
                    message.error(res.message)
                } else {
                    message.success('编辑设备成功')
                    doRefresh()
                }
                // if (res.code === 200) {

                // } else {
                //
                // }
            })
        }

        function onWebssh(item) {
            localStorage.removeItem('init_cmd')
            get({
                url: deviceWebSshLogin,
                data: () => {
                    return {
                        pk: item.id,
                    }
                },
            }).then((res) => {
                //console.log(res)
                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                const init_cmd = res.data['init_cmd']
                const remote_ip = res.data['remote_ip']
                const routerUrl = router.resolve({
                    path: '/ssh',
                    query: {
                        id: item.id,
                        remote_ip: remote_ip,
                        manage_ip: item.manage_ip,
                    },
                })
                //console.log(routerUrl)
                window.open(routerUrl.fullPath, '_blank') //打开新的窗口
            })
        }

        function Copy(item) {
            //console.log('item', item)
            var input = document.createElement('input') // 创建input对象
            input.value =
                item.idc_name +
                '/' +
                item['idc_model_name'] +
                '/' +
                item['rack_name'] +
                '/' +
                item['u_location_start'] +
                '-' +
                item['u_location_end'] +
                ' ' +
                '/SN:' +
                item['serial_num'] // 设置复制内容
            document.body.appendChild(input) // 添加临时实例
            input.select() // 选择实例内容
            document.execCommand('Copy') // 执行复制
            document.body.removeChild(input) // 删除临时实例
            message.success('复制成功')
        }

        function EditFunction(item: any) {
            modalDialog.value?.toggle()
            //console.log('编辑当前行', item)
            rowData.value = item
            //console.log(rowData.value)
            // edit_rowData.value['u_location'] = item.u_location_start+"-" +item.u_location_end
            nextTick(() => {
                // 根据机房查询网络区域
                get({
                    url: getCmdbNetzoneList,
                }).then((res) => {
                    if (EditFormOptions[11].optionItems !== undefined) {
                        EditFormOptions[11].optionItems.length = 0
                        let netzone_list = []
                        res.results.forEach((ele) => {
                            let dict = {
                                value: ele['id'],
                                label: ele['name'],
                            }
                            netzone_list.push(dict)
                        })
                        EditFormOptions[11].optionItems.push(...netzone_list)
                    }
                })

                // 根据机房查询模块
                get({
                    url: getCmdbIdcModelList,
                    data: () => {
                        return {
                            idc: item.idc,
                            limit: 1000,
                        }
                    },
                }).then((res) => {
                    //console.log('编辑--机房获取模块', res)
                    //  //console.log(conditionItems)
                    // let filter_list = []
                    if (EditFormOptions[5].optionItems !== undefined) {
                        EditFormOptions[5].optionItems.length = 0
                        let idc_model_list = []
                        res.results.forEach((ele) => {
                            let dict = {
                                value: ele['id'],
                                label: ele['name'],
                            }
                            idc_model_list.push(dict)
                        })
                        EditFormOptions[5].optionItems.push(...idc_model_list)
                    }
                })

                // 根据模块查询机柜
                get({
                    url: getCmdbRackList,
                    data: () => {
                        return {
                            idc_model: item.idc_model,
                            limit: 1000,
                        }
                    },
                }).then((res) => {
                    //console.log('编辑模块机柜内容', res)
                    //  //console.log(conditionItems)
                    // let filter_list = []
                    if (EditFormOptions[7].optionItems !== undefined) {
                        EditFormOptions[7].optionItems.length = 0
                        let model_list = []
                        res.results.forEach((ele) => {
                            let dict = {
                                value: ele['id'],
                                label: ele['name'],
                            }
                            model_list.push(dict)
                        })
                        EditFormOptions[7].optionItems.push(...model_list)
                    }
                })
                // 根据供应商查询型号

                EditFormOptions.forEach((it) => {
          const key = it.key
          const propName = item[key]

          if (key === 'id') {
            it.value.value = JSON.stringify(propName)
          } else {
            it.value.value = propName
          }
        })
            })
        }

        function get_info_by_idc(item) {
            //console.log('当前选中机房', item)
            get({
                url: getCmdbNetzoneList,
                // data: () => {
                //   return {
                //     limit: 1000,
                //   }
                // },
            }).then((res) => {
                //console.log('选中机房获取网络区域', res)
                //console.log(conditionItems)
                // let filter_list = []
                if (conditionItems[7].optionItems !== undefined) {
                    conditionItems[7].optionItems.length = 0
                    let netzone_list = []
                    res.results.forEach((ele) => {
                        let dict = {
                            value: ele['id'],
                            label: ele['name'],
                        }
                        netzone_list.push(dict)
                    })
                    conditionItems[7].optionItems.push(...netzone_list)
                    if (importFormOptions[10].optionItems !== undefined) {
                        importFormOptions[10].optionItems.length = 0
                        importFormOptions[10].optionItems.push(...netzone_list)
                    }
                }
            })

            get({
                url: getCmdbIdcModelList,
                data: () => {
                    return {
                        idc: item,
                        limit: 1000,
                    }
                },
            }).then((res) => {
                //console.log('选中机房获取模块', res)
                //console.log(conditionItems)
                // let filter_list = []
                if (conditionItems[6].optionItems !== undefined) {
                    conditionItems[6].optionItems.length = 0
                    let idc_model_list = []
                    res.results.forEach((ele) => {
                        let dict = {
                            value: ele['id'],
                            label: ele['floor'].toString() + 'F/' + ele['name'],
                        }
                        idc_model_list.push(dict)
                    })
                    conditionItems[6].optionItems.push(...idc_model_list)
                    if (importFormOptions[6].optionItems !== undefined) {
                        importFormOptions[6].optionItems.length = 0
                        importFormOptions[6].optionItems.push(...idc_model_list)
                    }
                }
            })
        }

        function get_info_by_vendor(item) {
            //console.log('当前选中供应商', item)
            get({
                url: getCmdbModelList,
                data: () => {
                    return {
                        vendor: item,
                        limit: 1000,
                    }
                },
            }).then((res) => {
                //console.log('该供应商型号', res)
                //console.log(conditionItems)
                // let filter_list = []
                if (conditionItems[9].optionItems !== undefined) {
                    conditionItems[9].optionItems.length = 0
                    let model_list = []
                    res.results.forEach((ele) => {
                        let dict = {
                            value: ele['id'],
                            label: ele['name'],
                        }
                        model_list.push(dict)
                    })
                    conditionItems[9].optionItems.push(...model_list)
                }
            })
        }

        function get_info_by_idc_model(item) {
            //console.log('当前选中什么模块', item)
            get({
                url: getCmdbRackList,
                data: () => {
                    return {
                        idc_model: item,
                        limit: 1000,
                    }
                },
            }).then((res) => {
                //console.log('该模块机柜内容', res)
                //console.log(conditionItems)
                // let filter_list = []
                if (conditionItems[10].optionItems !== undefined) {
                    conditionItems[10].optionItems.length = 0
                    let model_list = []
                    res.results.forEach((ele) => {
                        let dict = {
                            value: ele['id'],
                            label: ele['name'],
                        }
                        model_list.push(dict)
                    })
                    conditionItems[10].optionItems.push(...model_list)
                    if (importFormOptions[8].optionItems !== undefined) {
                        importFormOptions[8].optionItems.push(...model_list)
                    }
                }
            })
        }

        function change_handleClick(item) {
            ChangeLogmodalDialog.value?.toggle()
            //console.log(item)
            get({
                url: get_api_request_log,
                data: () => {
                    return {
                        path: `/api/asset_networkdevice/${item.id}/`,
                        limit: 1000,
                    }
                },
            }).then((res) => {
                //console.log('变更轨迹', res)
                //  //console.log(conditionItems)
                // let filter_list = []
                change_log_list.length = 0
                change_log_list.push(...res.results)
                change_log_page.value = 1
                change_log_pageSize.value = 10
                change_log_pageCount.value = Math.ceil(res.count / 10)
            })
        }

        function show_account_handleClick(item) {
            show_password_modalDialog.value?.toggle()
            rowData.value = item
        }

        function connect_account_handleClick(item) {
            connect_account_modalDialog.value?.toggle()
            //console.log('设备关联账号')
            // getasset_account_protocolList
            device_info.value = item.id
            // get({
            //   url: getasset_account_protocolList,
            //   data: () => {
            //     return {
            //       asset: item.id,
            //     }
            //   },
            // }).then((res) => {
            //console.log('当前设备账户信息', res)
            // connect_account_FormOptions.forEach((it) => {
            //   const key = it.key
            //   const propName = item[key]
            //   if (key === 'account') {
            //     it.value.value = res.results[0]['account']
            //   }
            //   if (key === 'protocol_port') {
            //     it.value.value = res.results[0]['protocol_port']
            //   }
            // })

            //console.log(connect_account_FormOptions)
            // })
        }

        function BindIP_handleClick(item) {
            bind_ip_modalDialog.value?.toggle()
        }

        function BindIpConfirm() {
            //console.log(bind_ip_form.value)
        }

        function second_onConfirm() {
            //console.log(second_password.value)
            if (second_password.value === 'netaxe_second') {
                show_password_modalDialog.value!.toggle()
                let csrf_token = Cookies.get('csrftoken')
                // 打开真实密码account_list/getInterfaceUsedList
                get({
                    url: device_account_url,
                    data: () => {
                        return {
                            password: second_password.value,
                            serial_num: rowData.value['serial_num'],
                            csrfmiddlewaretoken: csrf_token,
                        }
                    },
                }).then((res) => {
                    //console.log('account_list', res)
                    account_list.length = 0
                    account_list.push(...res.results)
                    account_page.value = 1
                    account_pageSize.value = 10
                    account_pageCount.value = Math.ceil(res.results.length / 10)
                })
                account_modalDialog.value?.toggle()
            } else {
                message.warning('请校验二级管理密码')
            }
            // showModal.value = false
            //
        }

        function second_onCancel() {
            //console.log(second_password.value)
        }

        function rowKey(rowData: any) {
            return rowData.id
        }

        function handleCheck(rowKeys) {
            checkedRowKeysRef.value = rowKeys
            //console.log('选中哪几行', rowKeys)
        }

        function handleExpand(rowKeys) {
            // checkedRowKeysRef.value = rowKeys
            //console.log('展开哪一行', rowKeys)
            if (rowKeys.length > 1) {
                rowKeys.splice(0, 1)
            }
            if (rowKeys.length === 0) {
                return
            }
            current_row_data.value = table.dataList.filter((item) => {
                return item['id'] == rowKeys
            })[0]
            //  //console.log(current_row_data.value)
            if (current_row_data.value) {
                nextTick(() => {
                    get({
                        url: getInterfaceUsedList,
                        data: () => {
                            return {
                                host_id: current_row_data.value.id,
                                interface_used: 1,
                            }
                        },
                    }).then((res) => {
                        if (res.code === 200) {
                            //console.log('获取展开行设备intused', res.results[0])
                            const int_used_item = res.results[0]
                            int_used_obj.value = int_used_item
                            //console.log(int_used_obj.value)
                        } else {
                            //  //console.log('获取展开行设备intused', res.results[0])
                            const int_used_item = {}
                            int_used_obj.value = int_used_item
                            //  //console.log(int_used_obj.value)
                        }
                    })
                })
                // nextTick(()=>{
                //   console
                // })

                // nextTick(() => {
                //   get({
                //     url: getInterfaceUsedList,
                //     data: () => {
                //       return {
                //         stauts_check: current_row_data.value.manage_ip,
                //       }
                //     },
                //   }).then((res) => {
                //     //console.log('获取展开行设备监控状态', res)
                //     if (res.code === 200) {
                //       const status_check_res = res.result[0]
                //       // status_check.value = status_check
                //       if (status_check_res['snmp_available'] == '1') {
                //         status_check.value = '正常'
                //       } else {
                //         status_check.value = '异常'
                //       }
                //     } else {
                //       status_check.value = '异常'
                //     }
                //   })
                // })
            }
        }

        function connect_collect() {
            if (checkedRowKeysRef.value.length > 0) {
                //console.log('执行设备关联采集方案')
                //console.log(table.dataList)
                let check_list = []
                table.dataList.forEach((ele) => {
                    if (checkedRowKeysRef.value.indexOf(ele.id) !== -1) {
                        check_list.push(ele)
                    }
                })
                //console.log('选择关联采集方案的行', check_list)
                collect_modalDialog.value = true
            } else {
                message.error('请先勾选需要关联采集方案的设备')
            }
        }

        function connect_report() {
            if (checkedRowKeysRef.value.length > 0) {
                //console.log('执行设备关联通知方案')
                //console.log(table.dataList)
                let check_list = []
                table.dataList.forEach((ele) => {
                    if (checkedRowKeysRef.value.indexOf(ele.id) !== -1) {
                        check_list.push(ele)
                    }
                })
                //console.log('选择关联通知方案的行', check_list)
                report_modalDialog.value = true
            } else {
                message.error('请先勾选需要关联通知方案的设备')
            }
        }

        function export_excel() {
            //  //console.log('选中哪几行', checkedRowKeysRef.value)
            if (checkedRowKeysRef.value.length > 0) {
                //console.log('执行数据导出')
                //console.log(table.dataList)
                let check_list = [{}]
                table.dataList.forEach((ele: { id: number }) => {
                    if (checkedRowKeysRef.value.indexOf(ele.id) !== -1) {
                        check_list.push(ele)
                    }
                })
                //console.log('选择导出的行', check_list)
                let export_str =
                    '设备名称,管理IP,序列号,厂商,型号,类型,机房位置,机房模块,区域,角色,状态,机柜,U位\n'
                for (let i = 0; i < check_list.length; i++) {
                    export_str =
                        export_str +
                        check_list[i].name +
                        ',' +
                        check_list[i].manage_ip +
                        ',' +
                        '`' +
                        check_list[i].serial_num +
                        ',' +
                        check_list[i].vendor_name +
                        ',' +
                        check_list[i].model_name +
                        ',' +
                        check_list[i].category_name +
                        ',' +
                        check_list[i].idc_name +
                        ',' +
                        check_list[i].idc_model_name +
                        ',' +
                        check_list[i].netzone_name +
                        ',' +
                        check_list[i].role_name +
                        ',' +
                        check_list[i].status_name +
                        ',' +
                        check_list[i].rack_name +
                        ',' +
                        check_list[i].u_location_start +
                        '--' +
                        check_list[i].u_location_end +
                        '\n'
                }
                export_str = encodeURIComponent(export_str)
                const link = document.createElement('a')
                link.href = 'data:text/csv;charset=utf-8,\ufeff' + export_str
                // link.style = 'visibility:hidden'
                link.download = '网络设备信息表.csv'
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            } else {
                message.error('请先勾选需要导出的设备')
            }
        }

        function get_cmdb_account() {
            get({
                url: getcmdb_accountList,
                data: () => {
                    return {
                        limit: 1000,
                    }
                },
            }).then((res) => {
                if (connect_account_FormOptions[0].optionItems !== undefined) {
                    res.results.forEach((ele) => {
                        var dict = {
                            label: ele['name'] + '(' + ele['username'] + ')',
                            value: ele['id'],
                        }
                        connect_account_FormOptions[0].optionItems.push(dict)
                    })
                }
            })
            //console.log('connect_account_FormOptions', connect_account_FormOptions)
        }

        function ConnectAccountConfirm() {
            console.log(connect_account_DataFormRef.value?.generatorParams())
            console.log('device_info.value', device_info.value)
            var connect_account_info = connect_account_DataFormRef.value?.generatorParams()
            var account_data = new FormData()
            account_data.append('asset_id', device_info.value)
            account_data.append('account', '[' + connect_account_info['account'] + ']')
            post({
                url: device_account_url,
                data: account_data,
            }).then((res) => {
                if (res.code === 200) {
                    message.success('修改设备信息成功')
                    connect_account_modalDialog.value!.toggle()
                    doRefresh()
                }
            })
        }

        function doCollection() {
            get({
                url: getCollection_planList,
                data: () => {
                    return {
                        limit: 1000,
                    }
                },
            }).then((res) => {
                const collection_list = res.results
                for (var i = 0; i < collection_list.length; i++) {
                    const dict = {
                        label: collection_list[i]['name'],
                        value: collection_list[i]['id'],
                    }
                    collection_options.push(dict)
                    if (conditionItems[15].optionItems != undefined) {
                        conditionItems[15].optionItems.push(dict)
                    }
                    if (EditFormOptions[16].optionItems != undefined) {
                        EditFormOptions[16].optionItems.push(dict)
                    }
                }
                nextTick(() => {
                    conditionItems[15].optionItems.splice(0, 0, { label: '', value: '' })
                })
            })
        }

        function doFramework() {
            get({
                url: getFrameworkList,
                data: () => {
                    return {
                        limit: 1000,
                    }
                },
            }).then((res) => {
                const framework_list = res.results
                for (var i = 0; i < framework_list.length; i++) {
                    const dict = {
                        label: framework_list[i]['name'],
                        value: framework_list[i]['id'],
                    }
                    framework_options.push(dict)
                    if (conditionItems[12].optionItems != undefined) {
                        conditionItems[12].optionItems.push(dict)
                    }

                    if (EditFormOptions[1].optionItems != undefined) {
                        EditFormOptions[1].optionItems.push(dict)
                    }
                    if (importFormOptions[1].optionItems != undefined) {
                        importFormOptions[1].optionItems.push(dict)
                    }
                }
                nextTick(() => {
                    conditionItems[12].optionItems.splice(0, 0, { label: '', value: '' })
                })
            })
        }

        function doAttribute() {
            get({
                url: getAttributeList,
                data: () => {
                    return {
                        limit: 1000,
                    }
                },
            }).then((res) => {
                const attribute_list = res.results
                for (var i = 0; i < attribute_list.length; i++) {
                    const dict = {
                        label: attribute_list[i]['name'],
                        value: attribute_list[i]['id'],
                    }
                    attribute_options.push(dict)
                    if (conditionItems[13].optionItems != undefined) {
                        conditionItems[13].optionItems.push(dict)
                    }

                    if (EditFormOptions[13].optionItems != undefined) {
                        EditFormOptions[13].optionItems.push(dict)
                    }
                    if (importFormOptions[12].optionItems != undefined) {
                        importFormOptions[12].optionItems.push(dict)
                    }
                }
                nextTick(() => {
                    conditionItems[13].optionItems.splice(0, 0, { label: '', value: '' })
                })
            })
        }

        onMounted(get_cmdb_account)
        onMounted(doRefresh)
        onMounted(doIdc)
        onMounted(doVendor)
        onMounted(doRole)
        onMounted(doCagetory)
        onMounted(doCollection)
        onMounted(doFramework)
        onMounted(doAttribute)
        return {
            // doReport,
            doAttribute,
            doFramework,
            ConnectAccountConfirm,
            Copy,
            device_info,
            term,
            socket,

            BindIP_handleClick,
            BindIpConfirm,
            bind_ip_modalDialog,
            btnClick,
            exportData,
            download_template,
            handleCheck,
            handleExpand,
            int_used_obj,
            status_check,
            export_excel,
            device_import,
            checkedRowKeysRef,
            collection_options,
            framework_options,
            attribute_options,
            report_options,
            connect_collect,
            connect_report,
            second_password,
            bind_ip_form,
            second_onConfirm,
            second_onCancel,
            itemDataFormRef,
            EditDataFormRef,
            importDataFormRef,
            device_import_dialog,
            searchDataFormRef,
            importDataFormConfirm,
            EditConfirm,
            tableColumns,
            account_tableColumns,
            EditFunction,
            change_handleClick,
            pagination,
            searchForm,
            onResetSearch,
            onSearch,
            ...table,
            rowData,
            change_log_list,
            account_list,
            change_log_page,
            change_log_pageSize,
            change_log_pageSizes,
            account_page,
            account_pageSize,
            account_pageSizes,

            change_log_keyword,
            change_log_pageCount,
            change_log_tableColumns,
            EditFormOptions,
            importFormOptions,
            connect_account_FormOptions,
            connect_account_DataFormRef,
            rowKey,
            modalDialog,
            WebsshmodalDialog,
            ChangeLogmodalDialog,
            show_password_modalDialog,
            connect_account_modalDialog,
            account_modalDialog,
            device_import_modalDialog,
            collect_modalDialog,
            report_modalDialog,
            show_account_handleClick,
            conditionItems,
            onUpdateTable,
            onUpdateBorder,
            doRefresh,
            get_info_by_idc,
            get_info_by_vendor,
            get_info_by_idc_model,
            row_expand,
            selectValues,
            selectCollectValues,
            bodyStyle,
            // onConfirm,
            NewConnectCollect,
            NewConnectReport,
            onCancelCollect,
            edit_rowData,
            segmented,
            connect_account_handleClick,
            device_data_show,
            import_show,
            device_import_template_url,
            formRef,
        }
    },
})
</script>

<style lang="scss">
.n-form.n-form--inline {
    width: 100%;
    display: inline-flex;
    align-items: flex-start;
    align-content: space-around;
    height: 5px;
}

.n-form-item.n-form-item--left-labelled .n-form-item-label {
    font-weight: bold;
}

.light-green {
    height: 220px;
    background-color: rgba(0, 128, 0, 0.12);
}

.green {
    height: 220px;
    background-color: rgba(0, 128, 0, 0.24);
}

.terminal {
    width: 100%;
    height: 100%;
}
</style>
